<template>
  <list
      v-model="searchParams"
      :headers="headers"
      isHasOperateColumn
      :searchUrl="data.searchUrl"
      ref="listRef"
  >
    <template #operateBtnsSlot>
      <v-button type="primary" @click="addBike" v-permission="`btn.Bike.add`" text="新增单车"/>
    </template>
    <template #operateSlot="scope">
      <v-button type="danger" @click="deleteHandle(scope.row)" text="删除"
                v-permission="`btn.Bike.remove`"/>
      <v-button type="primary" text="编辑" v-permission="`btn.Bike.update`" @click="editBike(scope.row)"/>
    </template>
    <template #searchSlot>
      <v-input label="名字" v-model="searchParams.name"/>
      <v-select label="品牌" v-model="searchParams.brandId" :selectOptions="data.brandSelectOptions" filterable
                remote @remoteMethod="remoteMethod"/>
      <v-select label="类型" v-model="searchParams.bikeType" :select-options="bikeTypeSelectOptions"/>
      <v-date-picker
          label="上市时间"
          format="YYYY" type="year" v-model:dataValue="searchParams.startTime" :is-picker="false"
          :width="110" :isMarginRight="false"/>
      ~
      <v-date-picker
          format="YYYY" type="year" v-model:dataValue="searchParams.endTime" :is-picker="false"
          :width="110"/>
    </template>
  </list>
</template>
<script lang="ts" setup>
import {reactive, ref, onMounted, inject, h} from 'vue'
import router from "@/router";
import {deleteBikeApi, updateBikeStatusApi} from "@/api/bike";
import {bikeTypeSelectOptions} from "./selectOptions"
import {getBrandListApi} from "@/api/brand";
import {ElSwitch} from "element-plus";

let $messageBox: any = inject('$messageBox')
let $message: any = inject('$message')

let searchParams = ref({
  name: '',
  bikeType: '',
  startTime: '',
  endTime: '',
  brandId: ''

})
const listRef = ref()
const headers = reactive<TableHeader[]>([
  {
    prop: 'name',
    label: '名称',
    width: 250
  },
  {
    prop: 'bikeType',
    label: '类型'
  },
  {
    prop: 'marketTime',
    label: '上市时间'
  },
  {
    prop: 'brandName',
    label: '品牌'
  },
  {
    prop: 'price',
    label: '价格'
  },
  {
    prop: 'status',
    label: '是否上架',
    render: (row) => {
      return h(ElSwitch, {
        modelValue: row.status,
        onChange: (status: boolean) => {
          updateBikeStatusApi(row.id, status).then(res => {
            if (res.status === 0) {
              listRef.value.searchData()
              $message.success(res.msg)
            } else {
              $message.error(res.msg)
            }
          })
        }
      })
    }
  },
  {
    prop: 'createdTime',
    label: '创建时间',
    width: 200
  },
  {
    prop: 'updatedTime',
    label: '更新时间',
    width: 200
  }
])
const data = reactive({
  searchUrl: '/bike/list',
  isShowDrawer: false,
  brandSelectOptions: []
})
const deleteHandle = (row: any) => {
  $messageBox.confirm(
      `确定删除${row.name}这个品牌吗？`,
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    deleteBikeApi(row.id).then(res => {
      if (res.status === 0) {
        $message.success('删除成功')
        listRef.value.searchData()
      } else {
        $message.error('删除失败')
      }
    })
  })
}

const getBrandList = (query?: string) => {
  getBrandListApi({name: query}).then((res) => {
    if (res.status === 0) {
      data.brandSelectOptions = res.data.pageData.map(item => {
        return {
          label: item.name,
          value: item.id
        }
      })
    }
  })
}

const remoteMethod = (query: string) => {
  if (query) {
    getBrandList(query)
  }
}

const addBike = () => {
  router.push('/product/addBike')
}

const editBike = (row) => {
  router.push({
    path: '/product/editBike',
    query: {
      id: row.id
    }
  })
}

onMounted(() => {
  getBrandList();
})

</script>

<script lang="ts">
export default {
  name: 'bikeManageList' // 设置组件名称
};
</script>

<style scoped lang="scss">

</style>
